<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 500px;
            height: 50px;
            border: 2px solid #ccc;
            border-radius: 50px;
            position: relative;
            margin: 10px auto;
        }
        
        .move {
            width: 50px;
            height: 50px;
            background: red;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%;
            cursor: move;
        }
        
        .wrap {
            width: 0px;
            height: 0px;
            background: blue;
            opacity: 0;
            /* IE 低版本 透明的兼容 */
            filter: alpha(opacity=0);
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="move"></div>
    </div>
    <div class="wrap"></div>
    <script>
        var oBox = document.querySelector('.box');
        var oMove = document.querySelector('.move');
        var oWrap = document.querySelector('.wrap');

        var w = oBox.clientWidth - oMove.offsetWidth;
        oMove.onmousedown = function(e) {
            var ev = e || event;
            var disX = ev.clientX - oMove.offsetLeft;
            document.onmousemove = function(e) {
                var ev = e || event;
                var l = ev.clientX - disX;
                l = l < 0 ? 0 : (l > w ? w : l);
                var s = w / l;
                var oW = 500 / s;
                var oH = 500 / s;
                var oP = 1 / s;
                oWrap.style.width = oW + 'px';
                oWrap.style.height = oH + 'px';
                oWrap.style.opacity = oP;
                oMove.style.left = l + 'px';
            }
            document.onmouseup = function() {
                document.onmousemove = document.onmouseup = null;
            }
            ev.preventDefault = ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
        }




















        // var w = oBox.clientWidth - oMove.offsetWidth;
        // oMove.onmousedown = function(e) {
        //     var ev = e || event;
        //     var disX = ev.clientX - oMove.offsetLeft;
        //     document.onmousemove = function(e) {
        //         var ev = e || event;
        //         var l = ev.clientX - disX;
        //         l = l < 0 ? 0 : (l > w ? w : l);
        //         //根据相同的时间求速度
        //         var t = w / l;
        //         var wrapW = 500 / t;
        //         var wrapH = 500 / t;
        //         var opa = 1 / t;
        //         oMove.style.left = l + 'px';
        //         oWrap.style.width = wrapW + 'px';
        //         oWrap.style.height = wrapH + 'px';
        //         oWrap.style.opacity = opa;
        //     }
        //     document.onmouseup = function() {
        //         document.onmousemove = document.onmouseup = null;
        //     }
        //     ev.preventDefault = ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
        // }
    </script>
</body>

</html>